<template>
  <!-- 外层盒子 -->
  <div id="details">
    <!-- 标题部分 -->
    <div id="title">
      <span id="tle-span1">
        南美印象巴西+阿根廷+秘鲁+智利23日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
        为您提供服务
      </span>
      <span id="tle-span2">即时付款</span>
    </div>
    <!-- 图片切换和规格横排 -->
    <div id="img">
      <!-- 图片切换 -->
      <!-- 大图 -->
      <div id="bigimg">
        <img :src="`/img/${imgB}`" alt="" />
      </div>
      <!-- 小图 -->
      <div id="miniimg">
        <div
          id="miniimgg"
          :class="{ active: i == now }"
          @click="(imgB = item.big), (now = i)"
          v-for="(item, i) in items"
          :key="i"
        >
          <img :src="`/img/${item.mini}`" alt="" />
        </div>
      </div>
      <!-- 规格 -->
      <div id="guige">
        <div id="first1row">
          <span class="span1">产品编码：00018865</span>
          <button class="btn1">秋游记自营</button>
        </div>
        <p style="font-size: 12px">出发地：北京</p>
        <div id="Price">
          <span id="price"
            >￥<span style="font-size: 30px">400010</span>起/人</span
          >
          <span
            style="font-size: 12px; margin-left: 370px; color: black"
          ></span>
          <el-popover
            width="200"
            trigger="hover"
            content="最低价¥400009元/人,本起价是可选出发日期中,按2人同住一间房最低核算价格最低单人价格。产品价格会根据您所选择的出发日期、出行人数、入住酒店房型、航班或交通以及所选附加服务的不同而有所差别。"
          >
            <el-button
              style="
                font-size: 12px;
                background: rgb(244, 244, 244);
                border: 0;
                margin-left: 520px;
              "
              slot="reference"
              >起价说明</el-button
            >
          </el-popover>
        </div>
        <div id="option">
          <!-- 团期 -->
          <span>选择团期:</span>
          <el-select id="select" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p style="margin: 9px 0">
            适用行程:<span style="margin-left: 10px">行程</span>
          </p>
          <p style="margin: 9px 0">
            <span style="margin-right: 10px">选择人数:</span>
            <span style="margin-right: 10px">成人</span>
            <button
              :disabled="num1 == '1' ? true : false"
              class="btn2"
              @click="num1--"
            >
              -</button
            ><span style="margin-left: 10px; margin-right: 10px">{{
              num1
            }}</span
            ><button class="btn2" @click="num1++">+</button>

            <span style="margin-left: 40px; margin-right: 6px">儿童</span>

            <button
              class="btn2"
              @click="num2--"
              :disabled="num2 == '1' ? true : false"
            >
              -</button
            ><span style="margin-left: 10px; margin-right: 10px">{{
              num2
            }}</span
            ><button class="btn2" @click="num2++">+</button>
          </p>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
          "
        >
          <div style="line-height: 50px; user-select: none; cursor: pointer">
            <i
              @click="whole"
              :class="{ type: ys1, type_tips: ys2 }"
              class="el-icon-star-on"
              >收藏</i
            >
          </div>
          <button id="btn3" @click="$router.push('/yd')">立即预定</button>
        </div>
      </div>
    </div>
    <!-- 日历和经理推荐 -->
    <div id="Row2">
      <div id="data">
        <el-calendar :range="['2022-10-01', '2022-10-31']"> </el-calendar>
      </div>
      <div id="item">
        <button id="btn4">产品经理推荐</button>
        <h4>行程特色</h4>
        <br />
        <span
          style="
            line-height: 24px;
            color: #555 !important;
            font-size: 14px !important;
          "
          >神秘天书- 乘坐小飞机高空俯瞰纳斯卡地画，探究千年不解之谜；<br />
          天空之城- 攀登山脊上的马丘比丘，体会失落之城的沉静与沧桑；<br />
          世界肚脐- 探秘复活节岛巨人石像，追寻太平洋*孤岛的真相；<br />
          震撼冰川- 壮阔的冰山，纯净的蓝冰，在大自然的鬼斧神工中迷醉；<br />
          世界尽头- 亲临世界*南端的乌斯怀亚小镇，饱览边陲极地风光；<br />
          壮美瀑布- 身临其境观赏伊瓜苏大瀑布，用镜头记录*美的瞬间；<br />
          上帝之城- 畅游“上帝*宠爱”的里约热内卢，尽享阳光和沙滩；<br />
          原始自然- 乘船航行于亚马逊雨林，在“地球之肺”中畅快地呼吸；</span
        >
      </div>
    </div>
    <div id="one-last">
      *预定此路线，部分班期可以使用抵用券抵扣<br />
      *不同的出发班期，可以享受的优惠略有不同，请以实际选择的班期为准<br />
      *因数据更新时滞，具体以实际销售金额为准<br />
    </div>
    <div id="nav">
      <div id="nav-1">行程介绍</div>
      <div id="nav-2" @click="goYuding">立即预定</div>
    </div>
    <div id="paly">
      <div id="playA">
        <button id="playA-btn1">行程A</button>
        <h3><i class="el-icon-s-flag"></i>行程介绍</h3>
        <ul>
          <li>行程名称：南美印象 巴西+阿根廷+秘鲁+智利23日 OPL</li>
          <li>行程天数：23天19晚</li>
          <li>适用团期：2023-04-01</li>
          <li>
            推荐理由：乘坐小飞机高空俯瞰纳斯卡地画，马丘比丘，复活节岛巨人石像，里约热内卢，伊瓜苏大瀑布，乘船航行于亚马逊雨林，乌斯怀亚小镇，震撼冰川。
          </li>
        </ul>
        <p>*由于部分城市无法提供国际航班服务，本次行程需从 北京 出发</p>
      </div>
      <h3><i class="el-icon-s-flag"></i>详细行程</h3>
      <div class="block">
        <el-timeline>
          <el-timeline-item timestamp="day1" placement="top">
            <el-card>
              <h4>
                北京<i
                  class="
"
                ></i
                >达拉斯<i class="el-icon-position"></i>利马
              </h4>
              <p>
                航班：AA262 起飞时间：1725 到达时间：1700；AA909 起飞时间：2222
                到达时间：0629+1；
              </p>
              <p>用餐： 早餐(无) 午餐(无) 晚餐(无)</p>
              <p>住宿： 飞机上</p>
              <span
                >当天下午在北京首都国际机场集合，乘坐美国航空公司航班前往秘鲁首都利马，中途在美国达拉斯转机，当晚夜宿飞机上，次日早晨抵达利马国际机场。</span
              >
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day2" placement="top">
            <el-card>
              <h4>
                利马<i class="el-icon-position"></i>纳斯卡<i
                  class="el-icon-position"
                ></i
                >帕拉卡斯
              </h4>
              <p>用餐： 早餐(无) 午餐(有) 晚餐(有)</p>
              <p>住宿： 当地五*</p>
              <span
                >早上抵达利马国际机场，导游接机后乘车前往观看【纳斯卡大地画】（车程约4小时），沿途可观赏沙漠风光及太平洋风光，抵达后乘坐小型飞机高空观赏世界神奇之迷的大地画，在空中盘旋飞行时间约1小时，映入眼帘的是历经数千年、错落在沙漠地上、风吹不散的神秘几何动物图案，使人感叹不已。游览完毕后乘车前往帕拉卡斯，晚餐后入住酒店休息.</span
              >
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day3" placement="top">
            <el-card>
              <h4>帕拉卡斯<i class="el-icon-position"></i>利马</h4>
              <p>用餐： 早餐(有) 午餐(有) 晚餐(有)</p>
              <p>住宿： 当地四*</p>
              <span
                >早餐后前往帕拉卡斯自然保护区码头，乘坐游艇前往【鸟岛】游览，可观赏到古老的世界神奇之迷—山间烛台奇观，还有数以万计的海鸟、海狮、小企鹅等（浏览时间为2小时）。下午乘车返回利马（车程约4小时），游览被评为世界文化遗产的利马老城区：参观【武器广场】、【总统府】、【大教堂】、【圣马丁广场】等，这些建筑瑰宝将西班牙殖民时期的繁荣表露无遗。晚餐后入住酒店休息。
                游艇需要根据当时海域情况决定是否可以出海，若因当天风浪较大不能出海，则此项目取消，费用为提前预付不可退。</span
              >
              <p></p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day4" placement="top">
            <el-card>
              <h4>
                利马<i class="el-icon-position"></i>库斯科<i
                  class="el-icon-position"
                ></i
                >乌鲁班巴
              </h4>
              <p>用餐： 早餐(有) 午餐(有) 晚餐(有)</p>
              <p>住宿： 特色酒店</p>
              <span
                >早餐后乘机飞往库斯科，大量印加时期建造的墙壁笔直地矗立着，狭窄的鹅卵石街道和广场挤满了穿着彩色传统服饰的当地人。抵达后导游接机，前往【库斯科全景的餐厅】品尝秘鲁特色餐：藜麦汤+苦柯茶+烤羊驼。下午前往【印加羊驼乐园】，参观羊驼饲养基地，可以喂羊驼，了解印加手工制品生产过程，了解印加农产品玉米、土豆、藜麦的知识。之后乘车前往【印加圣谷】，是安第斯山脉中乌鲁班巴河长达100多公里的雪山环绕的河谷地带，这里是印加帝国时期印加人在安第斯山谷的主要聚居地，隐匿着印加帝国*的宫殿与城堡古迹。这里雪山绵延、碧水长流、风景迤逦、五谷丰登，是一条闪烁着古印加人智慧和文化光芒的多姿多彩的翠谷，是维系库斯科古都的心脏重地。
                备注：库斯科和马丘比丘为高原地区，海拔在2800-3200米左右，抵达上述地区首先保证充分的睡眠，在下机前可食少量糖果，到酒店可饮用古卡叶茶，一切动作放慢，不可饮酒及过饱饮食，避免太热的水洗澡。机场及各大酒店均备有氧气供高山症状严重者使用。</span
              >
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day5" placement="top">
            <el-card>
              <h4>
                乌鲁班巴<i class="el-icon-position"></i>马丘比丘<i
                  class="el-icon-position"
                ></i
                >库斯科
              </h4>
              <p>用餐： 早餐(有) 午餐(有) 晚餐(有)</p>
              <p>住宿： 当地四*</p>
              <span
                >矗立在悬崖之巅的“失落之城”【
                马丘比丘遗迹】，是保存完好的前哥伦布时期的印加遗迹，也是南美洲*重要的考古发掘*，被评为世界新七大奇迹之一。今天我们将起早，乘车前往火车站乘坐豪华列车，沿着乌鲁班巴河，一路前往马丘比丘山脚下的热水镇，这座原本静谧的山间小镇因遗迹的面纱被揭开而变得忙碌起来，登上古迹，呈现在你眼前的是群山峻岭间的宏大建筑群，这里设计合理严谨，构造科学，布局巧妙，不得不说古老的印加人也许存在着某种特异功能。*的古迹游览结束之后，我们返回库斯科，晚餐后入住酒店。</span
              >
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day6" placement="top">
            <el-card>
              <h4>库斯科<i class="el-icon-position"></i>利马</h4>
              <p>用餐： 早餐(有) 午餐(有) 晚餐(无)</p>
              <p>住宿： 当地四*</p>
              <span
                >早餐后前往*热闹的【
                库斯科武器广场】，参观武器广场周边*重要的【库斯科大教堂】，它是殖民统治者向当地原著居民宣扬天主教信仰的*典型例证。随后参观【太阳神殿】，神殿是在印加文明史上*伟大的帝*统治时期建造的，为的是表达对太阳神的崇敬，外墙镶嵌着黄金，在太阳的照射下金光闪闪。之后乘车前往库斯科*的印加遗迹“满意的猎鹰”—【萨萨瓦曼】，它是印加帝国时期*重要的军事要塞，昔日每天动用三万人次，历时80年才建成，*今仍令现代人叹为观止。下午乘机飞往利马，抵达后导游接机，入住酒店休息。</span
              >
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day7" placement="top">
            <el-card>
              <h4>圣保罗<i class="el-icon-position"></i>洛杉矶</h4>
              <p>航班：AA216 起飞时间：2130 到达时间：0605+1；</p>
              <p>用餐： 早餐(有) 午餐(有) 晚餐(无)</p>
              <p>住宿： 飞机上</p>
              <span
                >早餐后游览圣保罗市区，乘坐旅游巴士参观【圣保罗大教堂】(外观)，【皇宫博物馆】(外观)，外观【拉美议会大厦】(外观)。前往州议会附近的【开拓者雕像】和【护法英雄纪念碑】游览。下午前往【
                蝙蝠侠胡同】，这是藏在维拉马达莱纳区深处的一条数百米的小巷，巷子从地面到墙上的每一寸都被涂满五颜六色的涂鸦。如果想要感受一下浓郁的南美色彩，那*从这条巷子开始。这条*的巷子吸引了世界各地的涂鸦艺术家，每隔一段时间都会有新的涂鸦盖过旧的涂鸦。所以每次到蝙蝠侠胡同，墙上的涂鸦都会有所不同。晚上乘机前往洛杉矶转机。
                注：自由活动时请结伴而行，注意保管好重要财务，注意人身安全。</span
              >
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="day8" placement="top">
            <el-card>
              <h4>洛杉矶<i class="el-icon-position"></i>北京</h4>
              <p>航班：AA181 起飞时间：1155 到达时间：1420+1；</p>
              <p>用餐： 早餐(无) 午餐(无) 晚餐(无)</p>
              <p>住宿： 飞机上</p>
              <span>转机返回北京，由于时差原因，于*天下午抵达。</span>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div id="yuding">
        <h3><i class="el-icon-s-flag"></i>预订须知</h3>
        <p>★*成团人数：必发，10人以上派领队。</p>
        <p>★团队集合时间地点：北京</p>
        <p>★若客人报名，收取*：30000元/人，尾款需在出发前30天付清。</p>
        <p>
          ★取消政策：此产品预定后，由于任何原因客人取消行程按照下列条款执行“：
        </p>
        <p>（1）出发前90天取消行程，退还全款；</p>
        <p>（2）出发前90天（含90天）*出发前60天取消行程，扣除*30000/人；</p>
        <p>（3）出发前60天（含60天）*出发前30天取消行程，扣除总费用的80%；</p>
        <p>（4）出发前30天（含30天）内取消行程，扣除全部费用；</p>
        <p>
          ★若因南美签证拒签（必须是通过我社办理的）取消行程，扣除3000/人。若因为客人不配合提供或补充签证材料而拒签的，我社按正常取消政策收取损失。
        </p>
      </div>
      <div id="tishi">
        <h3><i class="el-icon-s-flag"></i>温馨提示</h3>
        <p id="p1">【风险提示】</p>
        <p>
          1)
          游泳、漂流、潜水、滑雪、溜冰、戏雪、冲浪、探险、热气球、高山索道等活动项目，均存在危险。参与前请根据自身条件，并充分参考当地相关部门及其它专业机构的相关公告和建议后量力而行。
        </p>
        <p>
          2)
          禁忌提示：请尊重当地的饮食习惯、习俗禁忌、宗教礼仪等，入乡随俗，融入当地的民风民情。
        </p>
        <p>
          3)
          根据中国海关总署颁布的2010年第54号、2016年第19号、2016年第25号令，进境公民旅客携带在境外获取5000元以内（含5000元）个人自用进境物品的基础上，允许其在口岸进境免税店增加一定数量的免税购物额，连同境外免税购物额总计不超过8000元人民币的，海关予以免税放行，但烟草制品、酒精制品等国家规定应当征税的商品不在免税范围内，敬请知晓。
        </p>
        <p>
          4)
          根据发布的《中华人民共和国禁止携带、邮寄进境的动植物及其产品和其他检疫物名录》，将燕窝、新鲜水果、蔬菜、动物源性中药材、转基因生物材料等列入严禁携带或邮寄进境项目，敬请知晓。
        </p>
        <p>
          5)
          请您严格遵守境外旅游目的地有关国家法律法规，切勿从事象牙等濒危野生动植物及其制品交易或携带相关物品，避免因触犯法律损害自身利益。
        </p>
      </div>
    </div>
  </div>
</template>
<script src=""></script>
<script>
export default {
  data() {
    return {
      ys1: true,
      ys2: false,
      options: [
        {
          value: "选项1",
          label: "10-01(周六)出发 - 400010/人 - A行程",
        },
        {
          value: "选项2",
          label: "10-02(周日)出发 - 400010/人 - B行程",
        },
      ],
      num1: "1",
      num2: "0",
      value: "选项1",
      now: 0,
      imgB: "big1.jpg",
      items: [
        { mini: "mini1.jpg", big: "big1.jpg" },
        { mini: "mini2.jpg", big: "big2.jpg" },
        { mini: "mini3.jpg", big: "big3.jpg" },
        { mini: "mini4.jpg", big: "big4.jpg" },
      ],
    };
  },
  methods: {
    whole() {
      // 当点击第一次时，ys1从true变为false,Style样式type就会隐藏
      // 再点击第二次的时候由false,变为true,显示样式
      // !为取反
      this.ys1 = !this.ys1;
      this.ys2 = !this.ys2;
    },
  },
};
</script>

<style lang="scss">
.type {
  color: #555;
}
.type_tips {
  color: #fbb957;
}
* {
  margin: 0;
  padding: 0;
}
#details {
  width: 1140px;
  margin: 30px auto;
  #title {
    margin-bottom: 20px;
  }
  #tle-span1 {
    line-height: 30px;
    color: #333;
    font-size: 22px;
    margin-bottom: 10px;
  }

  #tle-span2 {
    font-size: 12px;
    border: 1px solid #fbb957;
    color: #fbb957;

    border-radius: 10px;
    padding: 2px 10px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: 3px;
  }
  #img {
    display: flex;
    #bigimg {
      width: 367px;
      height: 275px;
      img {
        width: 100%;
      }
    }
    #miniimg {
      width: 83px;
      margin-left: 8px;
      #miniimgg {
        margin-bottom: 8px;
        display: flex;
        &.active {
          border: 5px solid #fbb957;
        }
      }
      img {
        width: 100%;
      }
    }
  }
  #guige {
    width: 620px;
    margin-left: 50px;
    #first1row {
      display: flex;
      justify-content: space-between;
      .span1 {
        font-size: 12px;
      }
      .btn1 {
        font-size: 12px;
        border: 1px solid #fbb957;
        color: #fbb957;
        height: 15px;
        padding: 0 10px;
        border-radius: 10px;
      }
    }
    #Price {
      padding-top: 20px;
      background: rgb(244, 244, 244);
      color: #fbb957;
    }
  }
  #option {
    height: 106px;
    border: 3px solid #feeed0;
    margin-top: 20px;
    font-size: 14px;
    padding: 10px;
    #select {
      width: 300px;
      display: inline-block;
      margin-left: 10px;
      padding: 0;
      border: 0;
      color: #fbb957;
    }
    .btn2 {
      width: 20px;
    }
  }
  #btn3 {
    width: 160px;
    height: 40px;
    font-size: 18px;
    background: #fbb957;
    border-radius: 5px;
    border: 0;
    color: white;
  }
  #Row2 {
    width: 1140px;
    display: flex;
    #data {
      width: 480px;
      height: 358px;
      // overflow: hidden;
      .el-calendar-day {
        height: 40px;
      }
    }
    #item {
      margin-left: 30px;
      width: 630px;
      font-size: 16px;
      #btn4 {
        width: 100px;
        height: 24px;
        margin: 20px 0;
        border-radius: 15px;
        border: 0;
        background: #fbb957;
        color: white;
      }
    }
  }
  #one-last {
    line-height: 24px;
    color: #555;
    font-size: 14px;
  }
}
.el-select-dropdown__item.selected {
  color: #fbb957 !important;
}
.el-select-dropdown {
  width: 500px;
}
#nav {
  margin-top: 40px;
  width: 1140;
  height: 40px;
  background: rgb(60, 72, 82);
  display: flex;
  justify-content: space-between;
  #nav-1 {
    width: 120px;
    background: #fff;
    line-height: 40px;
    text-align: center;
    border-top: 4px solid #fbb957;
    cursor: pointer;
  }
  #nav-2 {
    width: 120px;
    background: #fbb957;
    color: #fff;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
}
.block {
  margin-top: 20px;
  .el-timeline-item__node {
    background: #fbb957;
  }
  .el-timeline-item__node--normal {
    left: -5px;
    width: 20px;
    height: 20px;
  }
  .el-timeline-item__timestamp {
    color: #fbb957;
    font-size: 18px;
    font-weight: bold;
  }
  h3 {
    margin-bottom: 10px;
    color: #555;
  }
  i {
    margin-left: 10px;
    margin-right: 10px;
    color: #fbb957;
  }
  p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #555;
  }
  span {
    margin-top: 30px;
    color: #555;
  }
}
#play {
  width: 990px;
  margin: 0 auto;
}
#playA {
  margin-top: 40px;
  margin-bottom: 40px;
  #playA-btn1 {
    width: 100px;
    height: 40px;
    border: 1px solid #fbb957;
    background: #fff;
    color: #fbb957;
    margin-bottom: 20px;
  }
  h3 {
    margin-bottom: 20px;
  }
  li {
    color: #555;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  p {
    font-size: 10px;
    color: #777;
  }
}
#yuding {
  h3 {
    margin: 40px 0 20px 0;
  }
  i {
    margin: 0 10px;
  }
  p {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    line-height: 24px;
  }
}
#tishi {
  h3 {
    margin: 40px 0 20px 0;
  }
  #p1 {
    color: #fbb957;
  }
  i {
    margin: 0 10px;
  }
  p {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    line-height: 24px;
  }
}
.el-icon-s-flag {
  color: #fbb957;
  margin-right: 10px;
}
</style>
